
  <span class="fa fa-th fa-index-nav" (click)="showNav = !showNav"></span>

    <nav [hidden]="!showNav" class="nav">
      <ul class="clearfix">
        <li>
          <a routerLink="/index">
            <div><i class="fa fa-home nav-fa"><i></i></i></div>
            <div><span>Home</span></div>
          </a>
        </li>
        <li>
          <a routerLink="/blog">
            <div><i class="fa fa-wordpress nav-fa"></i></div>
            <div><span>Blog</span></div>
          </a>
        </li>
        <li>
          <a routerLink="/example">
            <div><i class="fa fa-circle-o nav-fa"></i></div>
            <div><span>Example</span></div>
          </a>
        </li>
        <li>
          <a href="https://github.com/canyuegongzi" target="_blank">
            <div><i class="fa fa-github nav-fa"></i></div>
            <div><span>Github</span></div>
          </a>
        </li>
        <li>
          <a routerLink="/resume">
            <div><i class="fa fa-user-o nav-fa"></i></div>
            <div><span>Me</span></div>
          </a>
        </li>

        <li>
          <a href="mailto:yongfeide123@sina.com" rel="nofollow" target="_blank">
            <div><i class="fa fa-envelope-o nav-fa"></i></div>
            <div><span>Email</span></div>
          </a>
        </li>
        <li>
          <a routerLink="/link">
            <div><i class="fa fa-handshake-o nav-fa"></i></div>
            <div><span>About</span></div>
          </a>
        </li>
        <!--<li>
          <a href="https://github.com/canyuegongzi" target="_blank">
            <div><i class="fa fa-github nav-fa"></i></div>
            <div><span>Github</span></div>
          </a>
        </li>
        <li>
          <a routerLink="/link">
            <div><i class="fa fa-user-o nav-fa"></i></div>
            <div><span>Me</span></div>
          </a>
        </li>-->
      </ul>
    </nav>

<!--<div class="mainContent">
  <div class="ulist">
    <section> <a href="#"> <img src="./../../assets/images/s5.jpg"></a>
      <ul>
        <h2><a href="#">执子之手，与子偕老</a></h2>
        <p>于千万人之中，我遇见了我所遇见的人...</p>
      </ul>
    </section>
    <section> <a href="#"><img src="./../../assets/images/s7.jpg"></a>
      <ul>
        <h2><a href="#">陌上花开缓缓归</a></h2>
        <p>如果没有悄然伫立阡陌并为陌上风情所陶醉的人，那么花开也寂寞....</p>
      </ul>
    </section>
    <section> <a href="#"><img src="./../../assets/images/text02.jpg"></a>
      <ul>
        <h2><a href="#">岁月留痕之时光</a></h2>
        <p>每逢新旧年交替时候，我就被笼罩在一股茫然的思绪里，逃也逃不脱...</p>
      </ul>
    </section>
  </div>
</div>-->
